<template>
  <div class="login-container">
    <div class="login-content">
      <div class="form-title">
        <AppLogo />
        <h2>{{ isLogin ? '欢迎回来' : '创建账号' }}</h2>
        <p>{{ isLogin ? '请登录您的账户继续访问' : '请填写以下信息完成注册' }}</p>
      </div>
      
      <div class="form-container" v-if="isLogin">
        <el-form
          ref="formRef"
          :model="loginForm"
          :rules="rules"
          @keyup.enter="handleLogin"
        >
          <el-form-item prop="username">
            <el-input
              v-model="loginForm.username"
              placeholder="用户名"
              :prefix-icon="User"
            />
          </el-form-item>
          
          <el-form-item prop="password">
            <el-input
              v-model="loginForm.password"
              type="password"
              placeholder="密码"
              :prefix-icon="Lock"
              show-password
            />
          </el-form-item>
          
          <div class="form-operations">
            <el-checkbox v-model="loginForm.remember">记住我</el-checkbox>
            <el-link type="primary">忘记密码？</el-link>
          </div>
          
          <el-button
            type="primary"
            class="w-full"
            :loading="loading"
            @click="handleLogin"
          >
            登录
          </el-button>
          
          <div class="form-footer">
            <p>
              还没有账号？ 
              <el-link type="primary" @click="switchMode">立即注册</el-link>
            </p>
          </div>
        </el-form>
      </div>
      
      <Register
        v-else
        @switch-mode="switchMode"
        @register-success="handleRegisterSuccess"
      />
    </div>
    
   
    
    <!-- 背景装饰 -->
    <div class="login-decoration">
      <div class="circle circle-1"></div>
      <div class="circle circle-2"></div>
      <div class="circle circle-3"></div>
    </div>
  </div>
  <div class="rool">
      <a rel="stylesheet" target="_blank" href="https://beian.miit.gov.cn/#/Integrated/index" >蜀ICP备2024087328号-1</a>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { User, Lock } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router'
import type { FormInstance } from 'element-plus'
import { ElMessage } from 'element-plus'
import Register from './Register.vue'
import { validateUsername, validatePassword } from '@/utils/validate'
import { encrypt,stringToBase64 } from '@/utils/index'
import { login } from '@/apis/login'
import { useAppStoreWithOut } from '@/store/modules/app'
import { saveStorage } from '@/utils/storage/storage'
const appStore = useAppStoreWithOut()
const router = useRouter()
const formRef = ref<FormInstance>()
const loading = ref(false)
const isLogin = ref(true)

const loginForm = reactive({
  username: 'admin',
  password: 'ducai494235908',
  remember: false
})

const rules = {
  username: [
    { required: true, validator: validateUsername, trigger: 'blur' }
  ],
  password: [
    { required: true, validator: validatePassword, trigger: 'blur' }
  ]
}

const handleLogin = async () => {
  if (!formRef.value) return
  try {
    loading.value = true
    const valid = await formRef.value.validate()
    if (!valid) return
    const password = encrypt(loginForm.password) || ''
   const data = {
    account: loginForm.username,
    passWord:stringToBase64(password)
   }
    const res = await login<{token:string}>(data)
    console.log(res)
    appStore.setToken(res.token)
    saveStorage("token",res.token)
    router.push('/')
  } catch (error) {
    console.error('登录验证失败:', error)
  } finally {
    loading.value = false
  }
}

const switchMode = () => {
  isLogin.value = !isLogin.value
}

const handleRegisterSuccess = () => {
  isLogin.value = true
  ElMessage.success('注册成功，请登录')
}
</script>

<style scoped lang="scss">
@import '@/styles/variables.scss';
@import '@/styles/form.scss';
.rool{
  position: fixed;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%);
  
}
.login-container {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--el-bg-color-page);
  position: relative;
  overflow: hidden;
  
  .login-content {
    width: 400px;
    padding: $spacing-xl;
    background: var(--el-bg-color);
    border-radius: $border-radius-large;
    box-shadow: var(--el-box-shadow-light);
    position: relative;
    z-index: $z-index-normal;
  }
  
  .login-decoration {
    position: absolute;
    width: 100%;
    height: 100%;
    pointer-events: none;
    
    .circle {
      position: absolute;
      border-radius: 50%;
      transition: transform $transition-duration $transition-timing-function;
      
      &-1 {
        width: 300px;
        height: 300px;
        background: linear-gradient(135deg, 
          var(--el-color-primary-light-9), 
          var(--el-color-primary-light-3)
        );
        top: -150px;
        right: -150px;
        opacity: 0.1;
        animation: float 6s ease-in-out infinite;
      }
      
      &-2 {
        width: 200px;
        height: 200px;
        background: linear-gradient(135deg, 
          var(--el-color-success-light-9), 
          var(--el-color-success-light-3)
        );
        bottom: -100px;
        left: -100px;
        opacity: 0.1;
        animation: float 8s ease-in-out infinite reverse;
      }
      
      &-3 {
        width: 100px;
        height: 100px;
        background: linear-gradient(135deg, 
          var(--el-color-warning-light-9), 
          var(--el-color-warning-light-3)
        );
        top: 50%;
        left: 50%;
        opacity: 0.1;
        animation: float 10s ease-in-out infinite;
      }
    }
  }
}

@keyframes float {
  0%, 100% {
    transform: translateY(0) rotate(0);
  }
  50% {
    transform: translateY(-20px) rotate(5deg);
  }
}
</style>